<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="renderer" content="webkit">
<!-- Bootstrap -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/font-awesome/css/font-awesome.min.css">
<title>文档</title>

<style type="text/css">
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+java+json+less+sql */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
</style>
<script type="text/javascript">
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+java+json+less+sql */
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e){var t=n.util.type(e);switch(t){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=n.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return n.util.clone(e)})}return e}},languages:{extend:function(e,t){var a=n.util.clone(n.languages[e]);for(var r in t)a[r]=t[r];return a},insertBefore:function(e,t,a,r){r=r||n.languages;var l=r[e];if(2==arguments.length){a=arguments[1];for(var i in a)a.hasOwnProperty(i)&&(l[i]=a[i]);return l}var o={};for(var s in l)if(l.hasOwnProperty(s)){if(s==t)for(var i in a)a.hasOwnProperty(i)&&(o[i]=a[i]);o[s]=l[s]}return n.languages.DFS(n.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,t,a,r){r=r||{};for(var l in e)e.hasOwnProperty(l)&&(t.call(e,l,e[l],a||l),"Object"!==n.util.type(e[l])||r[n.util.objId(e[l])]?"Array"!==n.util.type(e[l])||r[n.util.objId(e[l])]||(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,l,r)):(r[n.util.objId(e[l])]=!0,n.languages.DFS(e[l],t,null,r)))}},plugins:{},highlightAll:function(e,t){var a={callback:t,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};n.hooks.run("before-highlightall",a);for(var r,l=a.elements||document.querySelectorAll(a.selector),i=0;r=l[i++];)n.highlightElement(r,e===!0,a.callback)},highlightElement:function(t,a,r){for(var l,i,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(l=(o.className.match(e)||[,""])[1].toLowerCase(),i=n.languages[l]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var s=t.textContent,u={element:t,language:l,grammar:i,code:s};if(n.hooks.run("before-sanity-check",u),!u.code||!u.grammar)return u.code&&(u.element.textContent=u.code),n.hooks.run("complete",u),void 0;if(n.hooks.run("before-highlight",u),a&&_self.Worker){var g=new Worker(n.filename);g.onmessage=function(e){u.highlightedCode=e.data,n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},g.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=n.highlight(u.code,u.grammar,u.language),n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(t),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},highlight:function(e,t,r){var l=n.tokenize(e,t);return a.stringify(n.util.encode(l),r)},tokenize:function(e,t){var a=n.Token,r=[e],l=t.rest;if(l){for(var i in l)t[i]=l[i];delete t.rest}e:for(var i in t)if(t.hasOwnProperty(i)&&t[i]){var o=t[i];o="Array"===n.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],g=u.inside,c=!!u.lookbehind,h=!!u.greedy,f=0,d=u.alias;if(h&&!u.pattern.global){var p=u.pattern.toString().match(/[imuy]*$/)[0];u.pattern=RegExp(u.pattern.source,p+"g")}u=u.pattern||u;for(var m=0,y=0;m<r.length;y+=r[m].length,++m){var v=r[m];if(r.length>e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(c?b[1].length:0),_=b.index+b[0].length,P=m,A=y,j=r.length;j>P&&_>A;++P)A+=r[P].length,w>=A&&(++m,y=A);if(r[m]instanceof a||r[P-1].greedy)continue;k=P-m,v=e.slice(y,A),b.index-=y}if(b){c&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),S=[m,k];x&&S.push(x);var N=new a(i,g?n.tokenize(b,g):b,d,b,h);S.push(N),O&&S.push(O),Array.prototype.splice.apply(r,S)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o=Object.keys(l.attributes).map(function(e){return e+'="'+(l.attributes[e]||"").replace(/"/g,"&quot;")+'"'}).join(" ");return"<"+l.tag+' class="'+l.classes.join(" ")+'"'+(o?" "+o:"")+">"+l.content+"</"+l.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,!document.addEventListener||n.manual||r.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/i,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\w\W]*?>)[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
Prism.languages.java=Prism.languages.extend("clike",{keyword:/\b(abstract|continue|for|new|switch|assert|default|goto|package|synchronized|boolean|do|if|private|this|break|double|implements|protected|throw|byte|else|import|public|throws|case|enum|instanceof|return|transient|catch|extends|int|short|try|char|final|interface|static|void|class|finally|long|strictfp|volatile|const|float|native|super|while)\b/,number:/\b0b[01]+\b|\b0x[\da-f]*\.?[\da-fp\-]+\b|\b\d*\.?\d+(?:e[+-]?\d+)?[df]?\b/i,operator:{pattern:/(^|[^.])(?:\+[+=]?|-[-=]?|!=?|<<?=?|>>?>?=?|==?|&[&=]?|\|[|=]?|\*=?|\/=?|%=?|\^=?|[?:~])/m,lookbehind:!0}}),Prism.languages.insertBefore("java","function",{annotation:{alias:"punctuation",pattern:/(^|[^.])@\w+/,lookbehind:!0}});
Prism.languages.json={property:/"(?:\\.|[^\\"])*"(?=\s*:)/gi,string:/"(?!:)(?:\\.|[^\\"])*"(?!:)/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee][+-]?\d+)?)\b/g,punctuation:/[{}[\]);,]/g,operator:/:/g,"boolean":/\b(true|false)\b/gi,"null":/\bnull\b/gi},Prism.languages.jsonp=Prism.languages.json;
Prism.languages.less=Prism.languages.extend("css",{comment:[/\/\*[\w\W]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-]+?(?:\([^{}]+\)|[^(){};])*?(?=\s*\{)/i,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\([^{}]*\)|[^{};@])*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/i,punctuation:/[{}();:,]/,operator:/[+\-*\/]/}),Prism.languages.insertBefore("less","punctuation",{"function":Prism.languages.less.function}),Prism.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-]+.*?(?=[(;])/,lookbehind:!0,alias:"function"}});
Prism.languages.sql={comment:{pattern:/(^|[^\\])(?:\/\*[\w\W]*?\*\/|(?:--|\/\/|#).*)/,lookbehind:!0},string:{pattern:/(^|[^@\\])("|')(?:\\?[\s\S])*?\2/,greedy:!0,lookbehind:!0},variable:/@[\w.$]+|@("|'|`)(?:\\?[\s\S])+?\1/,"function":/\b(?:COUNT|SUM|AVG|MIN|MAX|FIRST|LAST|UCASE|LCASE|MID|LEN|ROUND|NOW|FORMAT)(?=\s*\()/i,keyword:/\b(?:ACTION|ADD|AFTER|ALGORITHM|ALL|ALTER|ANALYZE|ANY|APPLY|AS|ASC|AUTHORIZATION|AUTO_INCREMENT|BACKUP|BDB|BEGIN|BERKELEYDB|BIGINT|BINARY|BIT|BLOB|BOOL|BOOLEAN|BREAK|BROWSE|BTREE|BULK|BY|CALL|CASCADED?|CASE|CHAIN|CHAR VARYING|CHARACTER (?:SET|VARYING)|CHARSET|CHECK|CHECKPOINT|CLOSE|CLUSTERED|COALESCE|COLLATE|COLUMN|COLUMNS|COMMENT|COMMIT|COMMITTED|COMPUTE|CONNECT|CONSISTENT|CONSTRAINT|CONTAINS|CONTAINSTABLE|CONTINUE|CONVERT|CREATE|CROSS|CURRENT(?:_DATE|_TIME|_TIMESTAMP|_USER)?|CURSOR|DATA(?:BASES?)?|DATE(?:TIME)?|DBCC|DEALLOCATE|DEC|DECIMAL|DECLARE|DEFAULT|DEFINER|DELAYED|DELETE|DELIMITER(?:S)?|DENY|DESC|DESCRIBE|DETERMINISTIC|DISABLE|DISCARD|DISK|DISTINCT|DISTINCTROW|DISTRIBUTED|DO|DOUBLE(?: PRECISION)?|DROP|DUMMY|DUMP(?:FILE)?|DUPLICATE KEY|ELSE|ENABLE|ENCLOSED BY|END|ENGINE|ENUM|ERRLVL|ERRORS|ESCAPE(?:D BY)?|EXCEPT|EXEC(?:UTE)?|EXISTS|EXIT|EXPLAIN|EXTENDED|FETCH|FIELDS|FILE|FILLFACTOR|FIRST|FIXED|FLOAT|FOLLOWING|FOR(?: EACH ROW)?|FORCE|FOREIGN|FREETEXT(?:TABLE)?|FROM|FULL|FUNCTION|GEOMETRY(?:COLLECTION)?|GLOBAL|GOTO|GRANT|GROUP|HANDLER|HASH|HAVING|HOLDLOCK|IDENTITY(?:_INSERT|COL)?|IF|IGNORE|IMPORT|INDEX|INFILE|INNER|INNODB|INOUT|INSERT|INT|INTEGER|INTERSECT|INTO|INVOKER|ISOLATION LEVEL|JOIN|KEYS?|KILL|LANGUAGE SQL|LAST|LEFT|LIMIT|LINENO|LINES|LINESTRING|LOAD|LOCAL|LOCK|LONG(?:BLOB|TEXT)|MATCH(?:ED)?|MEDIUM(?:BLOB|INT|TEXT)|MERGE|MIDDLEINT|MODIFIES SQL DATA|MODIFY|MULTI(?:LINESTRING|POINT|POLYGON)|NATIONAL(?: CHAR VARYING| CHARACTER(?: VARYING)?| VARCHAR)?|NATURAL|NCHAR(?: VARCHAR)?|NEXT|NO(?: SQL|CHECK|CYCLE)?|NONCLUSTERED|NULLIF|NUMERIC|OFF?|OFFSETS?|ON|OPEN(?:DATASOURCE|QUERY|ROWSET)?|OPTIMIZE|OPTION(?:ALLY)?|ORDER|OUT(?:ER|FILE)?|OVER|PARTIAL|PARTITION|PERCENT|PIVOT|PLAN|POINT|POLYGON|PRECEDING|PRECISION|PREV|PRIMARY|PRINT|PRIVILEGES|PROC(?:EDURE)?|PUBLIC|PURGE|QUICK|RAISERROR|READ(?:S SQL DATA|TEXT)?|REAL|RECONFIGURE|REFERENCES|RELEASE|RENAME|REPEATABLE|REPLICATION|REQUIRE|RESTORE|RESTRICT|RETURNS?|REVOKE|RIGHT|ROLLBACK|ROUTINE|ROW(?:COUNT|GUIDCOL|S)?|RTREE|RULE|SAVE(?:POINT)?|SCHEMA|SELECT|SERIAL(?:IZABLE)?|SESSION(?:_USER)?|SET(?:USER)?|SHARE MODE|SHOW|SHUTDOWN|SIMPLE|SMALLINT|SNAPSHOT|SOME|SONAME|START(?:ING BY)?|STATISTICS|STATUS|STRIPED|SYSTEM_USER|TABLES?|TABLESPACE|TEMP(?:ORARY|TABLE)?|TERMINATED BY|TEXT(?:SIZE)?|THEN|TIMESTAMP|TINY(?:BLOB|INT|TEXT)|TOP?|TRAN(?:SACTIONS?)?|TRIGGER|TRUNCATE|TSEQUAL|TYPES?|UNBOUNDED|UNCOMMITTED|UNDEFINED|UNION|UNIQUE|UNPIVOT|UPDATE(?:TEXT)?|USAGE|USE|USER|USING|VALUES?|VAR(?:BINARY|CHAR|CHARACTER|YING)|VIEW|WAITFOR|WARNINGS|WHEN|WHERE|WHILE|WITH(?: ROLLUP|IN)?|WORK|WRITE(?:TEXT)?)\b/i,"boolean":/\b(?:TRUE|FALSE|NULL)\b/i,number:/\b-?(?:0x)?\d*\.?[\da-f]+\b/,operator:/[-+*\/=%^~]|&&?|\|?\||!=?|<(?:=>?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|IN|LIKE|NOT|OR|IS|DIV|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/};
</script>

<style type="text/css">
html,body {
	font-family: "Microsoft Yahei UI Light","Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.content{
	padding: 15px;
}

.content-wrapper{
	margin-left: 0;
	background-color: #fff;
}

.text-green {
	color: #26b77b;
}

.text-red {
	color: #d14;
}

.text-gray {
	color: #999;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
	vertical-align: middle;
}

.table-section {
	margin-bottom: 30px;
}

code[class*="lang-"], code[class*="language-"] {
    font-family: Consolas,Monaco,monospace,"Lucida Console";
    font-size: 14px;
}
</style>
</head>
<body>
<div class="container doc-section">
	<div class="row">
		<div class="col-md-12">
			<h3 class="page-header">SpdUI常量及方法</h3>
			<p>SpdUI提供常用变量和方法，方便开发人员使用。</p>
			<table class="table table-bordered table-hover">
				<thead>
					<tr class="info">
						<th class="text-center" style="width:200px;">名称</th>
						<th class="text-center" style="width:100px;">类型</th>
						<th class="text-center">说明</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>SpdUI.contextPath</td>
						<td class="text-center text-gray">String</td>
						<td>获取Web网站上下文路径，值和Java使用<code>request.getContextPath()</code>一样。</td>
					</tr>
					<tr>
						<td style="width:200px;">SpdUI.isString(obj)</td>
						<td class="text-center text-gray">Function</td>
						<td>判断obj是否为字符串，如果obj是字符串返回true，否则返回false。</td>
					</tr>
					<tr>
						<td style="width:200px;">SpdUI.isNotString(obj)</td>
						<td class="text-center text-gray">Function</td>
						<td>判断obj是否为字符串，如果obj不是字符串返回true，否则返回false。</td>
					</tr>
					<tr>
						<td style="width:200px;">SpdUI.encodeBase64(str)</td>
						<td class="text-center text-gray">Function</td>
						<td>base64编码，参数str必须是字符串。</td>
					</tr>
					<tr>
						<td style="width:200px;">SpdUI.decodeBase64(str)</td>
						<td class="text-center text-gray">Function</td>
						<td>base64解码，参数str必须是字符串。</td>
					</tr>
					<tr>
						<td style="width:200px;">SpdUI.uuid()</td>
						<td class="text-center text-gray">Function</td>
						<td>生成UUID</td>
					</tr>
					<tr>
						<td style="width:200px;">SpdUI.encryptAES(str)</td>
						<td class="text-center text-gray">Function</td>
						<td>
							AES加密，str可以是Object对象或者String，如果是Object对象，先把str转成JSON字符串再加密。<br>
							使用CryptoJS库加密，随机uuid作为key和iv，uuid的前16是key，后16位是iv。<br>
							AES加密后的结果转成16进制字符串，把uuid附加在加密后的字符串前面。编码格式为UTF-8。<br>
							返回结果格式为<code>key + iv + 密文</code>。<br>
							用Java等其他语言解密，选择模式<code>AES/CBC/PKCS5Padding</code>
						</td>
					</tr>
					<tr>
						<td style="width:200px;">SpdUI.decryptAES(str)</td>
						<td class="text-center text-gray">Function</td>
						<td>
							AES解密，str必须是字符串，返回结果为解密后的字符串。
						</td>
					</tr>
					<tr>
						<td style="width:200px;">SpdUI.toJSONString(obj)</td>
						<td class="text-center text-gray">Function</td>
						<td>
							Object对象JSON序列化，返回序列化后的字符串。
						</td>
					</tr>
					<tr>
						<td style="width:200px;">SpdUI.parseJSON(str)</td>
						<td class="text-center text-gray">Function</td>
						<td>
							JSON字符串反序列化，返回Object对象。
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<!-- /.row -->
	
	<div class="row">
		<div class="col-md-12">
			<h3 class="page-header">Form表单校验</h3>
			<p>
				SpdUI的表单校验是对<code>nice-validator</code>的封装，目的是提供简化的方法和统一的界面，也可以直接使用nice-validator的方法。
				<a href="https://validator.niceue.com/docs/">点击查看nice-validator文档</a>
			</p>			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.formValidator(form, fields, msgPosition)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">给form表单添加校验，对nice-validator做进一步封装，简化参数和统一显示效果。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">返回validator实例，参考<a href="https://validator.niceue.com/docs/methods.html#section-3">nice-validator实例方法</a>。</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="3"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">form</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>jQuery选择器、 DOM Element或者jQuery对象，只支持Form表单。如果选择器返回多个form（如<code>$('form')</code>），只匹配第一个元素。</td>
					</tr>
					<tr>
						<td class="text-center">fields</td>
						<td class="text-center">必选</td>
						<td>
							<p>表单校验规则，<a href="https://validator.niceue.com/docs/core-rules.html">点击查看nice-validator的内置规则</a>。</p>
						</td>
					</tr>
					<tr>
						<td class="text-center">msgPosition</td>
						<td class="text-center">可选</td>
						<td>校验消息提示框的显示位置，默认在表单元素的右边，值有<code>top、right、bottom、left</code>。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre class="language-javascript" data-language="javascript"><code class="language-javascript">
SpdUI.formValidator('#form', {
	title: {
		rule: 'required;length(~50)',
		msg: '请输入新闻标题，不超过50个字。'
	},
	newsCategoryName: {
		rule: 'required',
		msg: '请选择新闻分类。'
	}
}, 'bottom');


var $form = $('#form);
SpdUI.formValidator($form, {
	title: {
		rule: 'required;length(~50)',
		msg: '请输入新闻标题，不超过50个字。'
	},
	newsCategoryName: {
		rule: 'required',
		msg: '请选择新闻分类。'
	}
}, 'bottom');
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.cleanUpValidator(form)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">清除表单中的全部验证消息。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">form</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>jQuery选择器、 DOM Element或者jQuery对象，只支持Form表单。</td>
					</tr>					
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
SpdUI.cleanUpValidator('#form');
SpdUI.cleanUpValidator($('#form'));
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.isValid(el, callback)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">
							判断某个区域或者某个字段是否验证通过，如果字段中有异步 ajax 验证，需要通过 callback 获取验证结果。<br>
							提示：也可以直接使用nice-validator提供的静态方法<a href="https://validator.niceue.com/docs/methods.html#section-1-2">$('#form).isValid()</a>。
						</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">如果没有callback，返回true或者false。如果有callback，在callback中通过参数返回。</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="2"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">el</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>jQuery选择器、 DOM Element或者jQuery对象，支持Form表单和表单元素。如果参数是表单，会校验整个表单。如果参数是表单元素，指只会校验该元素。</td>
					</tr>
					<tr>
						<td class="text-center" style="width:120px;">callback</td>
						<td class="text-center" style="width:100px;">可选</td>
						<td>需要通过ajax验证时，必须使用回调函数。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
// 使用回调函数获取验证结果
// 参数v是ajax返回的值
SpdUI.isValid('#form', (function(v){
    if (v) {
        // do something
    }
});

// 如果验证的字段中没有 ajax 异步验证，直接获取结果也是可以的
var $form = $('#form);
if(SpdUI.isValid($form)){
    // do something
}
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
		</div>
	</div>
	<!-- /.row -->
	
	<div class="row">
		<div class="col-md-12">
			<h3 class="page-header">Form表单操作</h3>
			<p>
				SpdUI的提供JSON对象和表单元素的相互转换和ajax方式提交表单。
				其中ajax提交表单依赖<code>jquery form</code>，<a href="https://jquery-form.github.io/form/">查看文档</a>。
			</p>		
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.formToObject(form)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">获取表单的值，返回JSON对象。别名方法<code>SpdUI.formToJSON(form)</code></td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">表单值对应的JSON对象。</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="3"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">form</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>jQuery选择器、 DOM Element或者jQuery对象，只支持Form表单。如果选择器返回多个form（如<code>$('form')</code>），只匹配第一个元素。</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.objectToForm(form, object)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">把JSON对象内容填到Form对应元素。别名方法<code>SpdUI.jsonToForm(form, object)</code></td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="2"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">form</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>jQuery选择器、 DOM Element或者jQuery对象，只支持Form表单。如果选择器返回多个form（如<code>$('form')</code>），只匹配第一个元素。</td>
					</tr>
					<tr>
						<td class="text-center">object</td>
						<td class="text-center">必选</td>
						<td>JSON对象</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.ajaxSubmit(form, options)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">表单提交ajax请求。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="2"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">form</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>jQuery选择器、 DOM Element或者jQuery对象，只支持Form表单。</td>
					</tr>
					<tr>
						<td class="text-center">options</td>
						<td class="text-center">必选</td>
						<td>具体值请参考示例</td>
					</tr>					
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
SpdUI.ajaxSubmit('#form', {
	//表单提交URL
 	url: SpdUI.contextPath + '/form/submit.do',
 	
 	//是否校验表单，默认为false。
 	validate: false
 	
	//提交到后台的额外数据，默认为nul，请不要重复填写表单已经有的数据。
    data: null,
    
	//调用成功返回，参数data和json请参考SpdUI.ajax()。
    success: function(data, json){
    	//do something
    },
    
	//调用失败返回，message是服务端返回的消息。如果failure不配置，默认自动弹出显示message的对话框。
	//如果不想执行默认操作，请设置failure: false。
 	failure: function(json, message){
 		//do something
 	},
 	
	//表单提交之前触发，如果返回false不继续提交。$form是表单的jQuery对象。
	beforeSubmit: function($form, formData){
		//do something
	}
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->			
		</div>
	</div>
	<!-- /.row -->
	
	
	<div class="row">
		<div class="col-md-12">
			<h3 class="page-header">对话框</h3>
			<p>
				SpdUI对话框基于<a href="https://nakupanda.github.io/bootstrap3-dialog/">bootstrap3 dialog</a>，提供统一的样式和简化方法。
			</p>		
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.alert(message, callback)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">alert对话框</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="2"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">message</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>显示内容</td>
					</tr>
					<tr>
						<td class="text-center">callback</td>
						<td class="text-center">可选</td>
						<td>alert回调函数，点击<code>关闭</code>时触发。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
SpdUI.alert('alert对话框');
SpdUI.alert('alert对话框', function(){
	//点击关闭后会执行代码
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.confirm(message, fnYes, fnNo)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">confirm对话框</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="3"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">message</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>显示内容</td>
					</tr>
					<tr>
						<td class="text-center">fnYes</td>
						<td class="text-center">可选</td>
						<td>点击<code>确定</code>时触发。</td>
					</tr>
					<tr>
						<td class="text-center">fnNo</td>
						<td class="text-center">可选</td>
						<td>点击<code>取消</code>时触发。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
SpdUI.confirm('确定删除文件？', function(){
	//点击确定会执行代码
});

SpdUI.confirm('confirm对话框', function(){
	//点击确定会执行代码
}, function(){
	//点击取消会执行代码
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.dialog(dialogBody, options)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">创建dialog</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">返回dialog对象，<a href="https://nakupanda.github.io/bootstrap3-dialog/">查看dialog方法</a>。</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="2"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">dialogBody</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>dialog窗口显示的内容，可以jQuery选择器、 DOM Element或者jQuery对象。如果选择器返回多个元素，只匹配第一个元素。</td>
					</tr>
					<tr>
						<td class="text-center">options</td>
						<td class="text-center">可选</td>
						<td>具体值请参考示例</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
SpdUI.dialog('#dialogBody', {
	title: '窗口',
	
	//dialog关闭按钮的文字
	closeLabel: '关闭',
	
	//dialog的显示效果，默认值是BootstrapDialog.SIZE_NORMAL
	//可选值有BootstrapDialog.SIZE_WIDE和BootstrapDialog.SIZE_LARGE
	size: BootstrapDialog.SIZE_NORMAL,
	
	//是否自动显示，如果为true，初始化完成后就会显示。
	autoShow: false,
	
	//dialog绑定的数据，可以通过dialog.getData('dialogData')获取。	
	dialogData: {
		name: name
	},
	
	//dialog的底部button，dialog默认只有一个关闭按钮，可以在buttons中添加更多的按钮。
	buttons: [],
	
	//创建dialog的时候触发
	oncreate: function(dialog, dialogData, dialogBody){
	},
	
	//关闭dialog的时候触发
	onclose: function(dialog, dialogData, dialogBody){
	},
	
	//dialog显示的时候触发
	onshow: function(dialog, dialogData, dialogBody){
	},
	
	//dialog隐藏的时候触发
	onhide: function(dialog, dialogData, dialogBody){
	}
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.formDialog(form, options)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">创建具有form表单的dialog</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">返回dialog对象，<a href="https://nakupanda.github.io/bootstrap3-dialog/">查看dialog方法</a>。</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="2"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">form</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>form表单内容，可以jQuery选择器、 DOM Element或者jQuery对象。如果选择器返回多个元素，只匹配第一个元素。</td>
					</tr>
					<tr>
						<td class="text-center">options</td>
						<td class="text-center">可选</td>
						<td>具体值请参考示例</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
SpdUI.formDialog('#form', {
	title: '窗口',
	
	//提交按钮的文字
	submitLabel: '确定',
	
	//取消按钮的文字
	cancelLabel: '取消',
	
	//form初始化时绑定的参数，默认null。
	formData: {
		name: name
	},
	
	//在提交表单时进行校验，如果不许要校验请留空。
	//校验规则参考SpdUI.formValidator(form, fields, msgPosition)。
	validate: {
		name: {
			rule: 'required;length(~50)',
			msg: '请输入新闻标题，不超过50个字。'
		}
	},
	
	//dialog的显示效果，默认值是BootstrapDialog.SIZE_NORMAL
	//可选值有BootstrapDialog.SIZE_WIDE和BootstrapDialog.SIZE_LARGE
	size: BootstrapDialog.SIZE_NORMAL,
	
	//是否自动显示，如果为true，初始化完成后就会显示。
	autoShow: false,
	
	//dialog绑定的数据，可以通过dialog.getData('dialogData')获取。	
	dialogData: {
		name: name
	},
	
	//formDialog默认有提交和关闭按钮，可以在buttons中添加更多的按钮。
	buttons: [],
	
	//点击确定按钮的时候触发
	onsubmit: function(form, formData, dialog, dialaogData){
	},
	
	//点击取消按钮的时候触发
	oncancel: function(form, formData, dialog, dialaogData){
	},
	
	//创建的时候触发
	oncreate: function(form, formData, dialog, dialaogData){
	},
	
	//显示的时候触发
	onshow: function(form, formData, dialog, dialaogData){
	},
	
	//隐藏的时候触发
	onhide: function(form, formData, dialog, dialaogData){
	}
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.openFormDialog(form, formData, dialogData)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">显示formDialog，同时更新formData和dialogData的值。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">返回dialog对象，<a href="https://nakupanda.github.io/bootstrap3-dialog/">查看dialog方法</a>。</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="3"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">form</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>form表单内容，可以jQuery选择器、 DOM Element或者jQuery对象。如果选择器返回多个元素，只匹配第一个元素。</td>
					</tr>
					<tr>
						<td class="text-center">formData</td>
						<td class="text-center">可选</td>
						<td>如果formData有值，会把值绑定到form表单。</td>
					</tr>
					<tr>
						<td class="text-center">dialogData</td>
						<td class="text-center">可选</td>
						<td>dialog绑定数据</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
SpdUI.openFormDialog('#form');
SpdUI.openFormDialog('#form',{
	name: 'admin'
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.openDialog(el, dialogData)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">显示dialog，同时更新dialogData的值。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">返回dialog对象，<a href="https://nakupanda.github.io/bootstrap3-dialog/">查看dialog方法</a>。</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="2"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">el</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>dialog显示内容，可以jQuery选择器、 DOM Element或者jQuery对象。如果选择器返回多个元素，只匹配第一个元素。</td>
					</tr>
					<tr>
						<td class="text-center">dialogData</td>
						<td class="text-center">可选</td>
						<td>dialog绑定数据</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
SpdUI.openDialog('#dialogBody');
SpdUI.openFormDialog('#dialogBody',{
	name: 'admin'
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.getDialog(el)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">获取dialog对象。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">返回dialog对象，如果dialog不存在返回null，<a href="https://nakupanda.github.io/bootstrap3-dialog/">查看dialog方法</a>。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">el</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>dialog显示内容，可以jQuery选择器、 DOM Element或者jQuery对象。如果选择器返回多个元素，只匹配第一个元素。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre><code class="language-javascript">
//创建dialog
SpdUI.dialog('#dialogBody');
//获取dialog对象
var dialog = SpdUI.getDialog('#dialogBody');
dialog.close();

SpdUI.formDialog('#form');
var dialog = SpdUI.getDialog('#form');
dialog.close();
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
		</div>
	</div>
	<!-- /.row -->	
	
	<div class="row">
		<div class="col-md-12">
			<h3 class="page-header">Table</h3>
			<p>
				SpdUI提供了对<code>bootstrap table</code>的封装，
				<a href="http://bootstrap-table.wenzhixin.net.cn/documentation/" target="_blank">点击查看bootstrap table文档</a>
			</p>			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.bootstrapTable(el, options)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">创建bootstrap table</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center" rowspan="2"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">el</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>jQuery选择器、 DOM Element或者jQuery对象，必须是table元素。如果选择器返回多个元素（如<code>$('table')</code>），只匹配第一个元素。</td>
					</tr>
					<tr>
						<td class="text-center">options</td>
						<td class="text-center">必选</td>
						<td>
							bootstrap table参数，<a href="http://bootstrap-table.wenzhixin.net.cn/documentation/" target="_blank">点击查看</a>。
						</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre class="language-javascript" data-language="javascript"><code class="language-javascript">
SpdUI.bootstrapTable('#table', {
	url: SpdUI.contextPath + '/table/query.do',
	columns: [{
		title: '登录名',
		field: 'loginName',
		width: 130
	},{
		title: '真实姓名',
		field: 'truename',
		width: 130
	},{
		title: '最后登录时间',
		field: 'lastLoginTime',
		width: 180,
		formatter: function(value, row, index) {
			return value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '';
		}
	},{
		title: '操作',
		field: 'id',
		align: 'left',
		formatter: function(value, row, index) {
			var html = '';
			html += '<div class="btn btn-xs btn-primary btn-row-edit">编辑</div>&nbsp;';
			html += '<div class="btn btn-xs btn-default btn-row-delete">删除</div>';
			return html;
		},
		events: {
			'click .btn-row-edit': function(event, value, row, index) {
				SpdUI.openFormDialog('#formEdit', row);
			},
			'click .btn-row-delete': function(event, value, row, index) {
				SpdUI.confirm('确定删除用户？', function(){
					SpdUI.getJSON({
						url: SpdUI.contextPath + '/admin/sysuser/delete.do?id=' + row.id,
						success: function(data, json){
							$('#table').bootstrapTable('refresh', {
								silent: true
							});
						}
					});
				});
			}
		}
	}],
	
	//提交到服务端的额外参数
	queryParams: function(params) {
		var $form = $('#formSearch');
		params = $.extend(params, SpdUI.formToObject($form));
		return params;
	}
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
		</div>
	</div>
	<!-- /.row -->
	
	<div class="row">
		<div class="col-md-12">
			<h3 class="page-header">Tabs</h3>
			<p>
				添加、删除和关闭SpdUI主框架的Tab标签，依赖bootStrap-addTabs，
				<a href="https://git.oschina.net/hbbcs/bootStrap-addTabs" target="_blank">点击查看bootStrap-addTabs文档</a>。
			</p>			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.addTab(options)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">创建新的Tab</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">option</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>参考示例</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre class="language-javascript" data-language="javascript"><code class="language-javascript">
SpdUI.addTab({
	id: 'tab1',
	title: 'baidutab',
	url: 'http://www.baidu.com'
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.closeTab(id)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">关闭Tab</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">id</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td></td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre class="language-javascript" data-language="javascript"><code class="language-javascript">
SpdUI.closeTab('tab1');
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.refreshTab(options)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">刷新指定Tab页面</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">options</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td></td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre class="language-javascript" data-language="javascript"><code class="language-javascript">
SpdUI.addTab({
	id: 'tab1',
	title: 'baidutab',
	url: 'http://www.baidu.com'
});
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
		</div>
	</div>
	<!-- /.row -->
	
	<div class="row">
		<div class="col-md-12">
			<h3 class="page-header">AJAX</h3>
			<p>
				SpdUI简单的封装了jQuery的AJAX方法，主要是简化参数和统一判断服务端返回的数据。
			</p>			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.ajax(options)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">ajax提交数据</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">jQuery AJAX对象</td>
					</tr>
					<tr>
						<td class="text-center"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">option</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td>参考示例</td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre class="language-javascript" data-language="javascript"><code class="language-javascript">
SpdUI.ajax({
	//服务端路径
	url: SpdUI.contextPath + '/ajax.do',
	
	//参数，没有可以留空
	data: {
	},
	
	//默认为json
	dataType: 'json',
	
	//默认为get
	type: 'get',
	
	//服务端返回code=0时触发success
	success: function(data, json){
	},
	
	//服务端返回code不为0时触发failure
	//failure默认会执行以下代码，如果不想failure执行默认代码，可以设置failure: false
	failure: function(json, message){
		SpdUI.alert(message || '操作失败');
	}
);
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.getJSON(options)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">get方式提交ajax，数据格式为json。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">options</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td></td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre class="language-javascript" data-language="javascript"><code class="language-javascript">
SpdUI.getJSON({
	//服务端路径
	url: SpdUI.contextPath + '/ajax.do',
	
	//参数，没有可以留空
	data: {
	},
	
	//服务端返回code=0时触发success
	success: function(data, json){
	},
	
	//服务端返回code不为0时触发failure
	//failure默认会执行以下代码，如果不想failure执行默认代码，可以设置failure: false
	failure: function(json, message){
		SpdUI.alert(message || '操作失败');
	}
);
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td colspan="4"><h4>SpdUI.postJSON(options)</h4></td>
					</tr>
					<tr>
						<td style="width:100px;" class="text-center"><strong>描述</strong></td>
						<td colspan="3">post方式提交ajax，数据格式为json。</td>
					</tr>
					<tr>
						<td class="text-center"><strong>返回值</strong></td>
						<td colspan="3">无</td>
					</tr>
					<tr>
						<td class="text-center"><strong>参数</strong></td>
						<td class="text-center" style="width:120px;">options</td>
						<td class="text-center" style="width:100px;">必选</td>
						<td></td>
					</tr>
					<tr>
						<td class="text-center"><strong>示例</strong></td>
						<td colspan="3">
							<pre class="language-javascript" data-language="javascript"><code class="language-javascript">
SpdUI.postJSON({
	//服务端路径
	url: SpdUI.contextPath + '/ajax.do',
	
	//参数，没有可以留空
	data: {
	},
	
	//服务端返回code=0时触发success
	success: function(data, json){
	},
	
	//服务端返回code不为0时触发failure
	//failure默认会执行以下代码，如果不想failure执行默认代码，可以设置failure: false
	failure: function(json, message){
		SpdUI.alert(message || '操作失败');
	}
);
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
			
			<table class="table table-bordered table-section">
				<tbody>
					<tr class="info">
						<td><h4>服务端JSON数据格式</h4></td>
					</tr>					
					<tr>
						<td>
							<pre class="language-javascript" data-language="javascript"><code class="language-javascript">
{
	//服务端执行是否成功，为0表示成功，不为0表示执行异常。
	code: '0',
	
	//服务端返回的提示消息
	//如果code不为0时，message通常会返回提示消息。
	message: '',
	
	//服务端返回的业务相关数据
	data: {}
}
							</code></pre>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- /.table -->
		</div>
	</div>
	<!-- /.row -->
	
	<div class="row">
		<div class="col-md-12">
			<h3 class="page-header">页面布局</h3>
			<p>
				SpdUI页面使用统一布局，参考模板<code>/WEB-INF/view/admin/layout-template.jsp</code>。
			</p>			
		</div>
	</div>
	<!-- /.row -->
</div>
<!-- /.doc-section -->

<input type="hidden" id="hiddenContextPath" value="${pageContext.request.contextPath}">
<!-- jQuery -->
<script src="${pageContext.request.contextPath}/static/lib/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/static/lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>